<!--
 * @Description: cron表达式
-->
<template>
  <ehl-form
    ref="form"
    class="cron_form"
    :labelWidth="80"
    :options="form.options"
    :data="form.data"
  >
    <!-- 表单头的插槽 -->
    <template v-slot:form_header>
      <div class="cron">{{ cron }}</div>
    </template>
  </ehl-form>
</template>
<script>
  import ehlForm from '@/common'
  export default {
    props: {
      value: { type: String, default: () => '' },
      config: { type: String, default: () => '' },
    },
    components: { ehlForm },
    data() {
      return {
        formConfig: null,
        form: {
          data: {
            type: {},

            year_month: [{ value: '01', label: '1月' }],
            year_day: [{ value: '01', label: '1日' }],
            year_hour: { value: '08', label: '8' },
            year_minute: { value: '00', label: '0' },

            month_day: [{ value: '01', label: '1日' }],
            month_hour: { value: '08', label: '8' },
            month_minute: { value: '00', label: '0' },

            week: [{ value: '01', label: '周1' }],
            week_hour: { value: '08', label: '8' },
            week_minute: { value: '00', label: '0' },

            day_hour: { value: '08', label: '8' },
            day_minute: { value: '00', label: '0' },

            interval_hour_start: { value: '00', label: '0' },
            interval_minute_start: { value: '00', label: '0' },
            interval_interval: { value: '01', label: '1' },
            interval_hour_end: { value: '08', label: '8' },
            point_hour: [{ value: '00', label: '0' }],

            minute_start: { value: '00', label: '0' },
            minute_interval: { value: '05', label: '5' },
            minute_end: { value: '08', label: '8' },
          },
          options: {
            type: {
              show: true,
              type: 'select',
              label: '调度周期',
              style: { width: '100%' },
              options: [
                '分钟',
                '小时-间隔时间',
                '小时-指定时间',
                '日',
                '周',
                '月',
                '年',
              ].map((item, index) => {
                return { value: index, label: `${item}` }
              }),
              change: function (data) {
                Object.keys(data.formOptions).forEach(key => {
                  data.formOptions[key].show = false
                })
                data.formOptions.type.show = true
                if (data.current.value.label === '分钟') {
                  let trueArr = ['minute_start', 'minute_interval', 'minute_end']
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                } else if (data.current.value.label === '小时-间隔时间') {
                  let trueArr = [
                    'interval_hour_start',
                    'interval_minute_start',
                    'interval_interval',
                    'interval_hour_end',
                  ]
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                } else if (data.current.value.label === '小时-指定时间') {
                  let trueArr = ['point_hour']
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                } else if (data.current.value.label === '日') {
                  let trueArr = ['day_hour', 'day_minute']
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                } else if (data.current.value.label === '周') {
                  let trueArr = ['week', 'week_hour', 'week_minute']
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                } else if (data.current.value.label === '月') {
                  let trueArr = ['month_day', 'month_hour', 'month_minute']
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                } else if (data.current.value.label === '年') {
                  let trueArr = ['year_month', 'year_day', 'year_hour', 'year_minute']
                  trueArr.forEach(key => {
                    data.formOptions[key].show = true
                  })
                }
              },
            },
            year_month: {
              show: false,
              type: 'select',
              label: '指定月份',
              multiple: true,
              style: { width: '100%' },
              options: [...Array(12).keys()].map(i => {
                return { value: `${i + 1 < 10 ? '0' : ''}${i + 1}`, label: `${i + 1}月` }
              }),
              change: function (data) {
                if (data.current.value.length === 0) {
                  data.current.value.push(this.options[0])
                }
              },
            },
            year_day: {
              show: false,
              type: 'select',
              label: '指定日',
              multiple: true,
              style: { width: '100%' },
              options: [...Array(31).keys()].map(i => {
                return { value: `${i + 1 < 10 ? '0' : ''}${i + 1}`, label: `${i + 1}日` }
              }),
              change: function (data) {
                if (data.current.value.length === 0) {
                  data.current.value.push(this.options[0])
                }
              },
            },
            year_hour: {
              show: false,
              type: 'select',
              label: '指定小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            year_minute: {
              show: false,
              type: 'select',
              label: '指定分钟',
              style: { width: '100%' },
              options: [...Array(60).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },

            month_day: {
              show: false,
              type: 'select',
              label: '指定日',
              multiple: true,
              style: { width: '100%' },
              options: [...Array(31).keys()].map(i => {
                return { value: `${i + 1 < 10 ? '0' : ''}${i + 1}`, label: `${i + 1}日` }
              }),
              change: function (data) {
                if (data.current.value.length === 0) {
                  data.current.value.push(this.options[0])
                }
              },
            },
            month_hour: {
              show: false,
              type: 'select',
              label: '指定小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            month_minute: {
              show: false,
              type: 'select',
              label: '指定分钟',
              style: { width: '100%' },
              options: [...Array(60).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },

            week: {
              show: false,
              type: 'select',
              label: '指定星期',
              multiple: true,
              style: { width: '100%' },
              options: [
                { value: `01`, label: `周日` },
                { value: `02`, label: `周一` },
                { value: `03`, label: `周二` },
                { value: `04`, label: `周三` },
                { value: `05`, label: `周四` },
                { value: `06`, label: `周五` },
                { value: `07`, label: `周六` },
              ],
              change: function (data) {
                if (data.current.value.length === 0) {
                  data.current.value.push(this.options[0])
                }
              },
            },
            week_hour: {
              show: false,
              type: 'select',
              label: '指定小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            week_minute: {
              show: false,
              type: 'select',
              label: '指定分钟',
              style: { width: '100%' },
              options: [...Array(60).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },

            day_hour: {
              show: false,
              type: 'select',
              label: '指定小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            day_minute: {
              show: false,
              type: 'select',
              label: '指定分钟',
              style: { width: '100%' },
              options: [...Array(60).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },

            //小时-间隔选项
            interval_hour_start: {
              show: false,
              type: 'select',
              label: '开始小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
              change: function (data) {
                data.formOptions.interval_hour_end.options = [...Array(24).keys()]
                  .slice(Number(data.current.value.value) + 1)
                  .map(i => {
                    return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
                  })
              },
            },
            interval_minute_start: {
              show: false,
              type: 'select',
              label: '开始分钟',
              style: { width: '100%' },
              options: [...Array(60).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            interval_interval: {
              show: false,
              type: 'select',
              label: '间隔小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            interval_hour_end: {
              show: false,
              type: 'select',
              label: '结束小时',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
              change: function (data) {
                data.formOptions.interval_hour_start.options = [...Array(24).keys()]
                  .slice(0, Number(data.current.value.value))
                  .map(i => {
                    return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
                  })
              },
            },
            //小时-指定选项
            point_hour: {
              show: false,
              type: 'select',
              label: '指定时间',
              multiple: true,
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
              change: function (data) {
                if (data.current.value.length === 0) {
                  data.current.value.push(this.options[0])
                }
              },
            },
            //分钟选项
            minute_start: {
              show: false,
              type: 'select',
              label: '开始时间',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
              change: function (data) {
                data.formOptions.minute_end.options = [...Array(24).keys()]
                  .slice(Number(data.current.value.value) + 1)
                  .map(i => {
                    return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
                  })
              },
            },
            minute_interval: {
              show: false,
              type: 'select',
              label: '间隔分钟',
              style: { width: '100%' },
              options: [5, 10, 15, 20, 30].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
            },
            minute_end: {
              show: false,
              type: 'select',
              label: '结束时间',
              style: { width: '100%' },
              options: [...Array(24).keys()].map(i => {
                return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
              }),
              change: function (data) {
                data.formOptions.minute_start.options = [...Array(24).keys()]
                  .slice(0, Number(data.current.value.value))
                  .map(i => {
                    return { value: `${i < 10 ? '0' : ''}${i}`, label: `${i}` }
                  })
              },
            },
          },
        },
      }
    },
    computed: {
      cron: function () {
        let res = this.value || ''
        if (this.form.data.type.label === '分钟') {
          let minute_interval = this.form.data.minute_interval.value
          let minute_start = this.form.data.minute_start.value
          let minute_end = this.form.data.minute_end.value
          res = `00 */${minute_interval} ${minute_start}-${minute_end} * * ?`
        } else if (this.form.data.type.label === '小时-间隔时间') {
          let interval_hour_start = this.form.data.interval_hour_start.value
          let interval_minute_start = this.form.data.interval_minute_start.value
          let interval_interval = this.form.data.interval_interval.value
          let interval_hour_end = this.form.data.interval_hour_end.value
          res = `00 ${interval_minute_start} ${interval_hour_start}-${interval_hour_end}/${interval_interval} * * ?`
        } else if (this.form.data.type.label === '小时-指定时间') {
          let point_hour = this.form.data.point_hour
          res = `00 00 ${point_hour
            .map(i => {
              return i.value
            })
            .sort((a, b) => {
              return Number(a) - Number(b)
            })
            .join(',')} * * ?`
        } else if (this.form.data.type.label === '日') {
          let day_hour = this.form.data.day_hour.value
          let day_minute = this.form.data.day_minute.value
          res = `00 ${day_minute} ${day_hour} * * ?`
        } else if (this.form.data.type.label === '周') {
          let week = this.form.data.week
          let week_hour = this.form.data.week_hour.value
          let week_minute = this.form.data.week_minute.value
          res = `00 ${week_minute} ${week_hour} ? * ${week
            .map(i => {
              return i.value
            })
            .sort((a, b) => {
              return Number(a) - Number(b)
            })
            .join(',')}`
        } else if (this.form.data.type.label === '月') {
          let month_day = this.form.data.month_day
          let month_hour = this.form.data.month_hour.value
          let month_minute = this.form.data.month_minute.value
          res = `00 ${month_minute} ${month_hour} ${month_day
            .map(i => {
              return i.value
            })
            .sort((a, b) => {
              return Number(a) - Number(b)
            })
            .join(',')} * ?`
        } else if (this.form.data.type.label === '年') {
          let year_month = this.form.data.year_month
          let year_day = this.form.data.year_day
          let year_hour = this.form.data.year_hour.value
          let year_minute = this.form.data.year_minute.value
          res = `00 ${year_minute} ${year_hour} ${year_day
            .map(i => {
              return i.value
            })
            .sort((a, b) => {
              return Number(a) - Number(b)
            })
            .join(',')} ${year_month
            .map(i => {
              return i.value
            })
            .sort((a, b) => {
              return Number(a) - Number(b)
            })
            .join(',')} ?`
        }
        res = res.replace(/undefined/g, '*')
        this.$emit('change', {
          cron: res,
          config: JSON.stringify({
            data: this.form.data,
            options: this.$refs.form ? this.$refs.form.getOptions() : this.form.options,
          }),
        })
        return res
      },
    },
    mounted() {
      let that = this
      this.formConfig = this.$refs.form.getOptions()
      if (!isEmpty(this.config)) {
        let tmp = JSON.parse(this.config)
        this.form.data = tmp.data
        Object.keys(tmp.options).forEach(key => {
          if (key !== 'type') {
            that.formConfig[key].show = tmp.options[key].show
          }
        })
      }
    },
  }
</script>
<style lang="less" scoped>
  .cron_form {
    .cron {
      width: 100%;
      margin-bottom: 20px;
      text-align: center;
    }
  }
</style>
